var content = document.getElementById('content');
var addBtn = document.getElementById('add-btn');
var todoUl = document.getElementById('todo-ul');
var todoH1 = document.getElementById('todo-h1');

addBtn.onclick = function () {
    addTodo()
}

var enterKeyCode = 13;

content.onkeyup = function (e) {
    console.log(1)
    if (e.keyCode === enterKeyCode){
        addTodo()
    }
}

var todos = [];

function renderTodos(){
    var html = '';
    for (var i = 0; i < todos.length; i++) {
        var todo = todos[i];
        html += '<li>\n' +
            '        <span>'+todo+'</span>\n' +
            '        <button type="button" class="add-finished" onclick="addFinished('+ i +')">完成</button>\n' +
            '        <button type="button" class="delete" onclick="deleteTodos('+ i +')">删除</button>\n' +
            '    </li>'
    }

    todoUl.innerHTML = html;

    todoH1.firstElementChild.innerText = '('+todos.length+')'

}
renderTodos();

function deleteTodos(index){
    todos.splice(index,1)
    renderTodos()
}

function addTodo(){
    var value = content.value;
    if (!value.trim()) {
        alert('请输入内容');
        return
    }
    todos.push(value);
    renderTodos();
    content.value = '';
}

var finishedUl = document.getElementById('finished-ul');
var finishedH1 = document.getElementById('finished-h1')
var finished = []

function renderFinished(){
    var html = '';
    for (var i = 0; i < finished.length; i++) {
        var f = finished[i];
        html += '<li>\n' +
            '        <span>'+f+'</span>\n' +
            '        <button type="button" class="delete" onclick="deleteFinished('+ i +')">删除</button>\n' +
            '    </li>'
    }

    finishedUl.innerHTML = html;

    finishedH1.firstElementChild.innerText = '('+ finished.length +')'
}
renderFinished()

function addFinished(index) {
    finished.push(todos[index])
    renderFinished();
    todos.splice(index,1)
    renderTodos()
}


function deleteFinished(index){
    finished.splice(index,1);
    renderFinished();
}
